<template>
  <el-row :gutter="20">
    <el-col :span="14">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      > 
        <el-form-item label="充值有效期" prop="validityStart">
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            @change="changeDate"
            range-separator="至"
            start-placeholder="开始日期" 
            end-placeholder="结束日期">
          </el-date-picker> 
        </el-form-item>
        <el-form-item label="充值秒数" prop="validity">
          <el-input v-model="ruleForm.validity"></el-input>
        </el-form-item> 
        <el-form-item label="充卡张数" prop="count">
          <el-input v-model="ruleForm.count"></el-input>
        </el-form-item> 
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >生成</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>
<script>
import { fieldMap, publicFilter } from "@/utils/showMap";
import store from "@/store";
import { cardInfo, getUserInfo } from "@/api/service"; 
 export default { 
    data() { 
      return {
        value1: [new Date(), new Date(new Date().getTime()+ 3600 * 1000 * 24 * 365)],
        // value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
        ruleForm: { 
        validityStart:new Date().getTime()/1000,
        validityEnd:new Date(new Date().getTime()+ 3600 * 1000 * 24 * 365).getTime()/1000,
        validity:'0',
        count: '1',
        },
        rules: {
           validityStart: [
            { required: true, message: '有效期不能为空', trigger: 'blur' },
          ], 
          validity: [
            { required: true, message: '充值秒数不能为空', trigger: 'blur' },
          ], 
          count: [
            { required: true, message: '数量不能为空', trigger: 'blur' },
          ], 
        }
      };
    },
    mounted(){
      //加载
      //if(this.$route.query.id) this.search(this.$route.query.id);
    },
    methods: {
     search(args) { 
        getUserInfo(args).then((res) => {
          for(let key in res.data){
            if(this.ruleForm.hasOwnProperty(key))
            this.ruleForm[key]=res.data[key]!==null?String(res.data[key]):"";
          }
        });
      },
      changeDate(args){
        this.ruleForm.validityStart=args[0].getTime()/1000;
         this.ruleForm.validityEnd=args[1].getTime()/1000; 
      },
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
             cardInfo(this.ruleForm).then((res) => {
              this.$router.push('/manage/rechargecard');
            });
          } else {
            return false;
          }
        });
      },

      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
</script>
<style lang="less" scoped>
.demo-ruleForm{
  text-align: left;
}
</style>
